<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="!crud.props.searchToggle">
        <el-form size="small" label-width="70px">
          <el-row :gutter="10">
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                          <el-form-item label="人员">
                            <table-select
                              :tableColumns="
                              [
                              {prop:'code',label:'人员编码',width: '100'},
                              {prop:'name',label:'人员名称',width: '150'},
                              ]"
                              labelKey="name"
                              valueKey="id"
                              width="400"
                              :value.sync="crud.query.userIds"
                              placeholder="请选择人员"
                              url="api/dropDown/sysUserList"
                            />
                          </el-form-item>
                        </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="业务日期" >
                <el-date-picker
                  v-model="crud.query.busDate"
                  type="date"
                  format="yyyy - MM - dd "
                  value-format="yyyy-MM-dd"
                  placeholder="请选择查询时间"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <rrOperation :crud="crud"/>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <crudOperation :permission="permission" />
      <!--表单组件-->

      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="showDialog"
        :title="crud.status.title"
      >
        <el-form
          ref="form"
          :model="form"
          size="small"
          label-width="80px"
        >
          <div>
            <table class="r-table">
              <tr>
                <th>考核项目</th>
                <th>本月目标</th>
                <th>本{{ workReportType[form.type] }}达成</th>
                <th>累计达成</th>
                <th>达成率</th>
              </tr>
              <tr>
                <td>网点开发</td>
                <td>{{ reportData.infoGoal }}</td>
                <td>{{ reportData.infoThisPeriodPerformance }}</td>
                <td>{{ reportData.infoUpToPerformance }}</td>
                <td>{{ reportData.infoUpToCompletionRate * 100 +'%' }}</td>
              </tr>
              <tr>
                <td>销售</td>
                <td>{{ reportData.saleGoal }}</td>
                <td>{{ reportData.saleThisPeriodPerformance }}</td>
                <td>{{ reportData.saleUpToPerformance }}</td>
                <td>{{ reportData.saleUpToCompletionRate * 100 +'%' }}</td>
              </tr>
              <tr>
                <td>物料植入</td>
                <td>{{ reportData.materialImplantationGoal }}</td>
                <td>{{ reportData.materialImplantationThisPeriodPerformance }}</td>
                <td>{{ reportData.materialImplantationUpToPerformance }}</td>
                <td>{{ reportData.materialImplantationUpToCompletionRate * 100 +'%' }}</td>
              </tr>
              <tr>
                <td>新品进店</td>
                <td>{{ reportData.newGoodsGoal }}</td>
                <td>{{ reportData.newGoodsThisPeriodPerformance }}</td>
                <td>{{ reportData.newGoodsUpToPerformance }}</td>
                <td>{{ reportData.newGoodsUpToCompletionRate * 100 +'%' }}</td>
              </tr>
              <tr>
                <td>地推陈列</td>
                <td>{{ reportData.floorDisplayGoal }}</td>
                <td>{{ reportData.floorDisplayThisPeriodPerformance }}</td>
                <td>{{ reportData.floorDisplayUpToPerformance }}</td>
                <td>{{ reportData.floorDisplayUpToCompletionRate * 100 +'%' }}</td>
              </tr>
            </table>
          </div>
          <div v-if="form.type === 1">
            <div >
              上午工作内容
            </div>
            <textarea disabled v-model="form.morningWorkContent" />
            <div >
              下午工作内容
            </div>
            <textarea disabled v-model="form.afternoonWorkContent" />
          </div>
          <div v-else-if="form.type === 2">
            <div >
              本周工作内容
            </div>
            <textarea disabled v-model="form.thisWeekWorkContent" />
            <div >
              下周工作内容
            </div>
            <textarea disabled v-model="form.nextWeekWorkContent"" />
          </div>
          <div v-else-if="form.type === 3">
            <div >
              本月工作内容
            </div>
            <textarea disabled v-model="form.thisMonthWorkContent" />
            <div >
              下月工作内容
            </div>
            <textarea disabled v-model="form.nextMonthWorkContent" />
          </div>
          <div>
            工作计划
          </div>
          <textarea disabled v-model="form.workPlan" />
          <div>
            需解决问题
          </div>
          <textarea disabled v-model="form.problemToSolve" />
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="showDialog = false">取消</el-button>
          <el-button
            type="primary"
            @click="showDialog = false"
          >确认</el-button
          >
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table"
                stripe border
                v-loading="crud.loading"
                :data="crud.data"
                size="small"
                height="700"
                style="width: 100%;"
                @selection-change="crud.selectionChangeHandler"
                @row-dblclick="openDetail"
                :cell-style="{'text-align':'center'}"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号"/>
        <!--        <el-table-column v-if="columns.visible('id')" prop="id" label="id" />-->
        <el-table-column prop="userName" label="人员名称" />
        <el-table-column  label="类型" >
          <template slot-scope="{ row }">
            {{ workReportType[row.type] }}报
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="开始日期" />
        <el-table-column prop="endDate" label="结束日期" />
        <el-table-column prop="morningWorkContent" label="上午工作内容" />
        <el-table-column prop="afternoonWorkContent" label="下午工作内容" />
        <el-table-column prop="thisWeekWorkContent" label="本周工作内容" />
        <el-table-column prop="nextWeekWorkContent" label="下周工作内容" />
        <el-table-column prop="thisMonthWorkContent" label="本月工作内容" />
        <el-table-column prop="nextMonthWorkContent" label="下月工作内容" />
        <el-table-column prop="workPlan" label="工作计划" />
        <el-table-column prop="problemToSolve" label="需解决问题" />
        <el-table-column prop="atUserName" label="抄送人" />
        <el-table-column prop="createUserName" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudPlasticDeposit, {getWorkIndexReport} from '@/api/erp/workReport'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import {getStartAndEnd} from "@/utils/auth";
const date = new Date()
// crud交由presenter持有
const defaultCrud = CRUD({
  title: '工作报表',
  url: 'api/appReportWork/queryAll',
  sort: '',
  crudMethod: { ...crudPlasticDeposit },
  query:{
    userIds:'',
    busDate:`${date.getFullYear()}-${date.getMonth()<9?"0"+(date.getMonth() + 1):date.getMonth() + 1}-${date.getDate()<9?"0"+(date.getDate()):date.getDate() }`
  },
  optShow: {
    add: false,
    edit: false,
    del: false,
    download: true,
    downloadDetail: false,
    leadingIn: false,
    enable: false,
    disable: false,
    pass: false,
    reject: false,
  }
})
const defaultForm = { id: null, customerId: null, goodsId: null, goodsCount: null, createTime: null, updateTime: null, companyId: null }
export default {
  name: 'workReport',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      chooseCustomer: [],
      permission: {
        add: ['admin', 'plasticDeposit:add'],
        edit: ['admin', 'plasticDeposit:edit'],
        del: ['admin', 'plasticDeposit:del'],
        import: ['admin', 'plasticDeposit:import'],
        export: ['admin', 'plasticDeposit:export'],
        copy: ['admin', 'plasticDeposit:copy'],
        upload: ['admin', 'plasticDeposit:upload'],
        download: ['admin', 'plasticDeposit:download'],
        adjust: ['admin', 'plasticDeposit:adjust'],
      },
      month:"",
      workReportType:['','日','周','月'],
      showDialog:false,
      form:{},
      reportData:{}
    }
  },
  watch: {
  },
  created(){
  },
  methods: {
    getYear(e){
    },
    async openDetail(row){
      //必须要有开始日期和结束日期
      if (row.startDate && row.endDate){
        const res = await getWorkIndexReport({userId:row.userId,startDate:row.startDate,endDate:row.endDate})
        this.reportData =res.data.performanceAssessment

        this.showDialog = true
      }
      this.form = row
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
  }
}
</script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.r-table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  tr{
    width: 100%;
    th,td{
      border: 1px solid #CECECE;
      width: 20%;
      text-align: center;
    }
  }

}
textarea{
  border: 1px solid #CECECE;
  width: 100%;
  height: 150px;
}
</style>
